.flex-one {
  flex: 1;
}

.flex-two {
  flex: 2 !important;
}

.header-top {
  height: 180px !important;
  background: url("../img/index/title (3).png") no-repeat center top;
}

#app {
  background: #06223b !important;
}

.panel-01 {
  background: transparent;
  border: none
}

.panel-header-title {
  background: url("../img/index/header-div.png")  center/100% no-repeat;
  height: 63px;
  color: #FFF;
  text-shadow: 0px 2px 0px #003D52;
  font-family: YouSheBiaoTiHei;
  font-size: 26px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 1px;
  padding-left: 20px;
  line-height: 36px;
  display: flex;
  align-items: center;
}

.mainTitles {
  background: url("../img/index/felx-2.svg")  left/100% no-repeat;
}

p {
  margin: 0;
}

.panel-body-div {
  //height: 360px;
  display: grid;
  grid-template-columns: repeat(2, 49%);
  grid-template-rows: repeat(4, 23%);
  gap: 10px;
  height: 100%;
}

@font-face {
  font-family: "PingFang SC";
  src: url("./fonts/PingFang SC.ttf");
}

.panel-bodys {
  height: 789px !important;
  border: 1px solid rgba(0, 44, 109, 1);
}

.panel-01 {
  padding-top: 0 !important;
}

.flex-list {
  column-gap: 30px;
}

.panel-bodyd {
  height: 85% !important;
  border: 1px solid rgba(0, 44, 109, 1);
}

.panel-bodye {
  height: 95.1% !important;
  border: 1px solid rgba(0, 44, 109, 1);
}

.flex-continer {
  .one-fourth {
    padding: 20px 0;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    justify-items: self-start;

    .box {
      display: flex;
      padding-left: 5px;
      position: relative;
      z-index: 99999;


      .text {
        padding-left: 10px;

        p:nth-child(1) {
          color: #CFDFFF;
          font-family: PingFang SC;
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          text-align: center;
          white-space: nowrap;
        }

        p:nth-child(2) {
          text-align: left;
          background: linear-gradient(180deg, #FFF 0%, #0EC5FF 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-family: DINPro;
          font-size: 32px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
      }

      img {
        width: 65px;
        height: 65px;
      }

      &:nth-child(2) {
        .text {
          p:nth-child(2) {
            background: linear-gradient(180deg, #FFF 0%, #23D38B 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }

      &:nth-child(3) {
        .text {
          p:nth-child(2) {
            background: linear-gradient(180deg, #FFF 0%, #EFC83D 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }

      &:nth-child(4) {
        .text {
          p:nth-child(2) {
            background: linear-gradient(180deg, #FFF 0%, #F6953C 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }


    .box + .box {
      border-left: 2px solid;
      border-image: linear-gradient(to bottom, rgba(5, 138, 255, 0), #058AFF, rgba(5, 138, 255, 0));
      border-image-slice: 1;
    }

    .box {


    }
  }

  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 30px;

    .title {
      background: url("../img/index/title-bg.png") no-repeat;
      width: 70%;
      height: 47px;
      color: #E6EFFF;
      display: flex;
      padding-left: 40px;
      align-items: center;
      font-family: Abel;
      font-size: 22px;
      font-style: normal;
      font-weight: 400;
      line-height: 51px; /* 196.154% */
    }

    .left-p {
      .el-input__inner {
        color: white;
        background: rgba(30, 88, 163, 0.50);
        border: 1px solid rgba(30, 88, 163, 0.50);

      }
    }
  }

}

.left-p-celect {
  background-color: #062540 !important;

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    color: white;
    background: rgba(0, 168, 255, 0.5);
  }

  .el-select-dropdown__item.selected {
    color: black;
  }

  .el-select-dropdown__item {
    color: white;
  }
}

.box-continer {
  height: 100%;
  display: flex;

  .left-continer {
    width: 50%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 45%);
    grid-template-rows: repeat(2, 50%);
    gap: 10px 20px;
    align-items: center;

    .text {
      text-align: center;

      p:nth-child(1) {
        color: var(--01, #E6EFFF);
        font-family: PingFang SC;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding: 0 10px;
        border-left: 3px solid #65EDFF;
        border-right: 3px solid #65EDFF;
        margin: 20px 0;
      }

      p:nth-child(2) {
        padding: 12px;
        color: #4BAEFF;
        font-size: 30px;
        font-family: DINPro;
        font-style: normal;
        font-weight: 700;
        letter-spacing: 1.6px;
      }
    }

    &:nth-child(2) {
      .text {
        p:nth-child(2) {
          padding: 12px;
          color: red;
          font-size: 30px;
          font-style: normal;
          font-weight: 700;
          letter-spacing: 1.6px;
        }
      }
    }
  }

  .rgiht-continer {
    position: relative;

    .dnumb {
      position: absolute;
      top: 40%;
      left: 29%;
      color: #FFF;
      text-align: center;
      font-family: DINPro;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 40px; /* 166.667% */
    }
  }
}

.continer-div {
  .box {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    padding-top: 20px;
    height: 60px;
    justify-items: center;
    align-items: center;
    margin: 10px 0;

    .div-bgs {
      width: 70%;
      height: 100%;
      cursor: pointer;
      background: url("../img/index/bgdiv.png") no-repeat;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;

    }

    .acriveClass {
      background: url("../img/index/activeDiv.png") center no-repeat;
      background-size: contain;
      transform: scale(1.2);
      align-items: center;
      text-align: center;
      justify-content: center;


    }
  }

  .boxs {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    padding-top: 20px;
    height: 60px;
    justify-items: center;
    align-items: center;
    margin-bottom: 10px;

    .div-bgs {

      width: 70%;
      height: 100%;
      cursor: pointer;
      background: url("../img/index/bgdiv.png") no-repeat;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;

    }

    .acriveClass {
      background: url("../img/index/activeDiv.png") center no-repeat;
      background-size: contain;
      transform: scale(1.2);
      align-items: center;
      text-align: center;
      justify-content: center;


    }
  }

  .grid-box {
    display: grid;
    grid-template-columns: repeat(3, 30%);
    grid-template-rows: repeat(2, 49%);
    height: 322px;
    justify-items: center;
    justify-content: center;
    gap: 20px;

    .grid-div {
      background: url("../img/index/grid-img.png") no-repeat;
      width: 233px;
      height: 145px;
      display: flex;
      align-items: center;
      justify-content: center;

      .div-img {
        background: url("../img/index/images.png") center no-repeat;
        height: 100%;
        width: 100%;
      }
    }

  }

  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      margin-top: 20px;
      background: url("../img/index/title-bg.png") no-repeat;
      width: 70%;
      height: 47px;
      color: #E6EFFF;
      display: flex;
      padding-left: 40px;
      align-items: center;
      font-family: Abel;
      font-size: 22px;
      font-style: normal;
      font-weight: 400;
      line-height: 51px; /* 196.154% */
    }

    .felx-box {
      margin-top: 20px;
      display: flex;
      align-items: center;

    }

    p {
      cursor: pointer;
      background: rgba(30, 88, 163, 0.50);
      padding: 4px 28px;
      margin: 0 10px;
      white-space: nowrap;
    }
  }

  .list-progress {
    width: 100%;

    li {
      margin-top: 15px;
      width: 100%;
      padding: 20px 0;
      height: 40px !important;

      .item {
        .item-head {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title {
            font-size: 14px;
            // line-height: 2;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            span {
              display: inline-block;
              height: 16px;
              width: 16px;
              font-size: 12px;
              font-weight: bold;
              //background: #007bce;
              text-align: center;
              line-height: 16px;
              border-radius: 4px;
            }
          }

          .num {
            width: 120px;
            padding-left: 10px;
            font-size: 18px;
            text-align: right;
            font-family: 'numDin';
          }
        }

        .item-progress {
          display: flex;
          align-items: center;
          margin-top: 5px;

          .progress {
            flex: 1;
            height: 4px;
            background: rgba(30, 88, 163, 0.2);
            position: relative;

            .progress-bar {
              position: relative;
              height: 4px;
              // margin-top: 15px;
              &:before {
                content: '';
                position: absolute;
                background: linear-gradient(270deg,
                #0ec5ff 0%,
                rgba(14, 197, 255, 0) 100%);
                height: 100%;
                width: 100%;
                top: 0;
                animation: barIncrease 1s ease-in-out;
                animation-delay: 0.5s;
                animation-fill-mode: both;
              }

              &:after {
                content: '';
                position: absolute;
                height: 14px;
                width: 14px;
                border-radius: 50%;
                background: #0ec5ff;
                border: 3px solid #0e5672;
                left: 100%;
                // margin-right: 10px;
                top: 50%;
                margin-top: -7px;
                animation: pointAnimation 1s ease-in-out;
                animation-delay: 0.5s;
                animation-fill-mode: both;
              }
            }
          }
        }
      }

      //&:nth-child(1) {
      //  .item {
      //    .item-head {
      //      .title {
      //        span {
      //          background: #d24222;
      //        }
      //      }
      //    }
      //  }
      //}
      //
      //&:nth-child(2) {
      //  .item {
      //    .item-head {
      //      .title {
      //        span {
      //          background: #ea9a00;
      //        }
      //      }
      //    }
      //  }
      //}
      //
      //&:nth-child(3) {
      //  .item {
      //    .item-head {
      //      .title {
      //        span {
      //          background: #00ad64;
      //        }
      //      }
      //    }
      //  }
      //}
      //
      //&:nth-child(4) {
      //  .item {
      //    .item-head {
      //      .title {
      //        span {
      //          background: #5b43db;
      //        }
      //      }
      //    }
      //  }
      //}
    }
  }

  .title {
    display: flex;
  }

}

.grid-continer {
  display: grid;
  grid-template-columns: repeat(3, 30%);
  justify-content: space-between;
  height: 100%;

  .title {
    background: url("../img/index/title-bg.png") no-repeat;
    width: 70%;
    height: 47px;
    color: #E6EFFF;
    display: flex;
    padding-left: 40px;
    align-items: center;
    font-family: Abel;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 51px; /* 196.154% */
    white-space: nowrap;
  }

  .felx-box {
    //margin-top: 20px;
    display: flex;
    align-items: center;

    p {
      cursor: pointer;
      background: rgba(30, 88, 163, 0.50);
      padding: 4px 28px;
      margin: 0 10px;
      white-space: nowrap;
    }
  }


  .grid-box {
    display: grid;
    grid-template-columns: repeat(3, 30%);
    height: 85%;
    justify-items: center;
    justify-content: space-between;

    .box-flex {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;

      p {
        color: #CFDFFF;
        text-align: center;
        font-family: PingFang SC;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 1px;
      }

      p:nth-child(3) {
        color: #65C8FF;
        text-align: center;
        font-family: DINPro;
        font-size: 32px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 1.6px;
      }
    }
  }

  .continer-right {
    .title-box {
      display: flex;
      align-items: center;
      width: 90%;
      margin-left: -50px;

      .title {
        margin-left: -20px;
      }

      .felx-box {
        width: 30%;
      }


    }

    .box-prokrt {
      display: flex;
      justify-content: space-between;
      margin-top: 34px;

      .img-box {
        display: flex;
        align-items: center;
        position: relative;

        .clearfix {
          position: absolute;
          top: 44px;
          left: 24px;
          color: #EAF4FF;
          font-family: DINPro;
          font-size: 30px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
      }
    }

  }


  .title-boxs {
    display: flex;
    justify-content: center;
    margin-top: 20px;

    .title-p {
      color: #CFDFFF;
      text-align: center;
      font-family: PingFang SC;
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      padding: 10px 20px;
      display: inline-block;
      text-align: center;
      position: relative;

    }

    .title-p::before {
      content: '';
      position: absolute;
      width: 3px;
      height: 20px;
      background: #0EC5FF;
      left: 7px;
      top: 15px;
    }

    .title-p::after {
      content: '';
      position: absolute;
      width: 3px;
      height: 20px;
      background: #0EC5FF;
      right: 7px;
      top: 15px;
    }
  }
}

.custom-flex {
  position: relative;

  .fa-get-pocket {
    position: absolute;
    top: 0;
    z-index: 999;
    background: linear-gradient(to right, #0f2d4a, rgba(32, 125, 215, 0));
    width: 30%;
    height: 100%;

    .pocket-box {
      padding: 20px;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .pocket-box-continer {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .fa-ge {
          color: #E6EFFF;
          font-family: PingFang SC;
          font-size: 32px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          letter-spacing: 1.6px;
        }

        .fa-ge-p {
          border-radius: 0px 10px 10px 0px;
          border: 1px solid #65EDFF;
          background: rgba(0, 99, 216, 0.50);
          color: #A9F5FF;
          font-family: PingFang SC;
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          letter-spacing: 1px;
          padding: 10px;
        }

        .fa-get-pocket-box {
          width: 100%;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
        }

        .zhifa {
          margin: 0 auto;
          width: 90%;


        }
      }

      div:nth-child(2) {
        width: 50%;
      }
    }

    .zhifa {
      width: 100%;
      margin: 20px 0 !important;

      .zhifa-box {
        width: 100%;
        display: flex;
        background: linear-gradient(270deg, rgba(0, 99, 216, 0.30) -0.01%, rgba(0, 99, 216, 0.00) 99.99%);
        justify-content: space-around;
        align-items: center;
        padding: 10px;
        border-left: 1px solid #00ffff;
        position: relative;

        p {
          min-width: 200px;
          color: #FFF;
          font-family: PingFang SC;
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          border-radius: 4px;

        }

        .box-continers {
          position: absolute;
          right: -40px;
        }
      }


    }
  }

  .fa-get-pockets {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    background: linear-gradient(to left, #0f2d4a, rgba(32, 125, 215, 0.0));
    width: 30%;
    height: 100%;

    .pocket-box {
      flex-direction: row-reverse;
    }
  }
}

#header {
  z-index: 999;
}

.clearfix-box {
  display: grid;
  grid-template-columns: repeat(6, auto);
  justify-items: center;

  .box-continerE {
    text-align: center;

    p {
      background: linear-gradient(180deg, #CFDFFF 0%, #7DC7FF 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

.yunHui {
  display: grid;
  grid-template-columns: repeat(2, 48%);
  grid-template-rows: repeat(2, 40%);
  justify-content: space-between;
  align-content: space-around;
  gap: 10px;
  height: 90%;

  .box-grid {
    border-radius: 6px;
    border: 1.5px solid #0EC5FF;
    padding: 10px 30px;
    background: linear-gradient(96deg, rgba(4, 100, 212, 0.20) 12.78%, rgba(4, 100, 212, 0.00) 106.53%);
    display: flex;
    align-items: center;
    justify-content: center;

    .text {
      padding-left: 20px;
      width: 70%;

      p:nth-child(1) {
        color: #E6EFFF;
        font-family: PingFang SC;
        font-size: 28px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 1.4px;
        padding-bottom: 10px;
        white-space: nowrap;
      }

      p:nth-child(2) {
        border: 1px solid #3FB3F5;
        display: inline-block;
        background: rgba(63, 169, 245, 0.10);
        box-shadow: 0px 4px 27px 0px rgba(122, 255, 255, 0.25) inset;
        padding: 10px;

        span {
          border-radius: 2px;

        }

      }
    }
  }
}

.pull-right {
  left: 0 !important;
  color: #FFF;
  font-family: PingFang SC;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.img-bottom {
  position: absolute;
  bottom: 0;
  left: -620px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;

  .box {
    margin: 0 auto;
    display: flex;
    margin-bottom: -60px;
    position: relative;
    z-index: 9999;

    .clearfix {
      background: url("../img/index/left-pu.png") left no-repeat;
      width: 300px;
      text-align: center;
      margin: 0 10px;
      height: 100px;
      padding: 5px;
      height: 100px;
      color: #FFF;
      font-family: PingFang SC;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-style: normal;
      font-weight: 400;
      cursor: pointer;
    }

    .clearfixClass {
      background: url("../img/index/left-active.png") left no-repeat;
    }

    .clearfix-right {
      background: url("../img/index/right-active.png") right no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 300px;
      height: 100px;
      padding: 5px;
      margin: 0 10px;
      color: #FFF;
      font-family: PingFang SC;
      font-size: 32px;
      font-style: normal;
      font-weight: 400;
      cursor: pointer;
    }

    .clearfixClassD {
      background: url("../img/index/right-pu.png") left no-repeat;
    }
  }
}

.custom-map {
  position: relative;
}

.header-datetime {
  margin: 0 !important;
  margin-top: 45px !important;
  left: 50px !important;
}

.anniu {
  cursor: pointer;
  margin: 0 10px;
  position: relative;
  left: 2062px;
  top: 35px;
  padding: 10px 20px;
  display: inline-block;
  border: 1px solid #4B9EFF;
  transform: skewX(-342deg);
}

.annius {
  cursor: pointer;
  margin: 0 10px;
  position: relative;
  left: 5200px;
  top: 35px;
  padding: 10px 20px;
  display: inline-block;
  border: 1px solid #4B9EFF;
  transform: skewX(342deg);
}

.header-datetimes {
  right: 0 !important;

}

.anniud {
  cursor: pointer;
  margin: 0 10px;
  position: relative;
  left: 7450px;
  top: 35px;
}

.panel-bodyd-box {
  display: grid;
  grid-template-columns: repeat(2, 48%);
  justify-content: space-between;
  //height: 100%;
  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .title {
      margin-top: 20px;
      background: url("../img/index/title-bg.png") no-repeat;
      flex: 1;
      height: 47px;
      color: #E6EFFF;
      display: flex;
      padding-left: 40px;
      align-items: center;
      font-family: Abel;
      font-size: 22px;
      font-style: normal;
      font-weight: 400;
      line-height: 51px; /* 196.154% */
    }

    .felx-box {
      margin-top: 20px;
      display: flex;
      align-items: center;
      flex: 1;
    }

    p {
      cursor: pointer;
      background: rgba(30, 88, 163, 0.50);
      padding: 4px 28px;
      margin: 0 10px;
      white-space: nowrap;
    }

    width: 90%;

    .felx-box {
      width: 30%;
    }

  }

  .box {
    margin-left: 40px;
    display: flex;

    .grid-title {
      margin-left: 40px;
      width: 60%;
      display: grid;
      grid-template-columns: repeat(2, 49%);
      grid-template-rows: repeat(3, 30%);
      align-content: space-between;
      align-items: end;
      gap: 10px 20px;

      .grid-box {
        display: flex;
        justify-content: space-around;
        align-items: center;

        p:nth-child(1) {
          width: 20px;
          height: 20px;
          background: red;

        }

        p:nth-child(2) {
          width: 120px;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        p {
          color: var(--, #E7EFFF);
          font-family: PingFang SC;
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: 40px; /* 200% */
        }
      }
    }
  }
}


.buttonClass{
  background: linear-gradient(180deg, rgba(3, 119, 255, 0.54) 0%, #0377FF 100%);;
}
